<template>
  <slide-view
    v-empty="!canShowDetail"
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :body-style="{padding: 0, height: '100%'}"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
    class="detail-container"
    @close="hideView">
    <flexbox
      v-loading="loading"
      direction="column"
      class="detail-main">

      <detail-header
        :btn-group="btnGroup"
        :more-btn-group="moreBtnGroup"
        :detail-data="detailData"
        :fields="headerFields"
        :label="detailData.collectionNo"
        :type-name="typeObj.name"
        :icon="`wk wk-${typeObj.icon}`"
        :icon-color="typeObj.color"
        @command="handleCommand" />

      <examine-info
        v-if="showExamine"
        :id="id"
        :record-id="detailData.recordId"
        :owner-user-id="detailData.ownerUserId"
        :examine-type="type"
        class="examine-info"
        @info="handleExamineInfo"
        @on-handle="handleRefresh" />

      <flexbox-item
        style="margin-left: -1px; margin-right: -2px"
        class="tab-container">
        <el-tabs
          v-model="currentTab"
          type="border-card">
          <el-tab-pane
            v-for="(tab, index) in tabs"
            :key="index"
            :label="tab.label"
            :name="tab.name"
            lazy>
            <component
              v-if="detailData.batchId"
              :is="tab.name"
              :id="id"
              :label="typeObj.label"
              :batch-id="detailData.batchId"
              :detail-data="detailData" />
          </el-tab-pane>
        </el-tabs>
      </flexbox-item>
    </flexbox>

    <transfer-owner
      v-if="showTransfer"
      :type="type"
      :list="[detailData]"
      @close="showTransfer = !showTransfer"
      @update="handleRefresh" />

    <create-com
      v-if="showCreate"
      :type="type"
      :id="id"
      :batch-id="detailData.batchId"
      @update="handleRefresh"
      @close="showCreate = false" />
  </slide-view>
</template>

<script>
import {
  jxcCollectionQueryByIdAPI,
  jxcCollectionSetStateByIdsAPI,
  jxcCollectionDeleteByIdsAPI
} from '@/api/jxc/collection'

import CreateCom from '../../components/Create/CreateCom'
import TransferOwner from '../../components/TransferOwner'

import ExamineInfo from '@/components/NewCom/WkExamine/ExamineInfo' // 审批

import DetailListenerMixin from '../../mixins/DetailListener'

export default {
  name: 'JXCReturnedMoneyDetail',
  components: {
    CreateCom,
    TransferOwner,

    ExamineInfo
  },
  mixins: [DetailListenerMixin],
  data() {
    const formatTime = data => {
      if (!data.value) return '--'
      return this.$moment(data.value).format('YYYY-MM-DD')
    }
    return {
      detailRequest: jxcCollectionQueryByIdAPI,
      invalidRequest: jxcCollectionSetStateByIdsAPI,
      deleteRequest: jxcCollectionDeleteByIdsAPI,

      btnGroup: [
        {
          btnText: '转移',
          command: 'transfer',
          type: 'primary',
          btnClass: '',
          icon: 'wk wk-transfer'
        },
        {
          btnText: '编辑',
          command: 'update',
          type: 'primary',
          btnClass: 'xr-btn--green',
          icon: 'wk wk-circle-edit'
        }
      ],
      moreBtnGroup: [
        {
          label: '作废',
          command: 'setState',
          icon: 'wk wk-invalid'
        },
        {
          label: '删除',
          command: 'delete',
          icon: 'wk wk-delete'
        }
      ],
      headerFields: [
        { fieldName: '回款类型', field: 'collectionType' },
        { fieldName: '回款金额', field: 'collectionAmount', isMoneyField: true },
        { fieldName: '回款方式', field: 'collectionMethod' },
        { fieldName: '回款时间', field: 'orderTime', valueFormat: formatTime },
        { fieldName: '负责人', field: 'ownerUserIdName' }
      ],

      currentTab: 'TabBaseInfo',
      tabs: [
        { label: '基本信息', name: 'TabBaseInfo' },
        { label: '附件', name: 'TabFile' },
        { label: '操作记录', name: 'TabRecordList' }
      ],

      showCreate: false,
      showTransfer: false
    }
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'update':
          // 编辑
          this.showCreate = !this.showCreate
          break
        case 'transfer':
          // 转移
          this.showTransfer = true
          break
        case 'setState':
          // 作废
          this.handleInvalid()
          break
        case 'delete':
          // 删除
          this.handleDelete()
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../styles/detail";
</style>
